<template>
    <div class="box">
        <div ref="main" :style="{ width: props.width, height: props.height }"></div>
    </div>
</template>
<script setup>
import { onMounted, ref, reactive, defineProps, computed } from 'vue';
import * as echarts from 'echarts';
import chinaMap from '../../assets/json/chinaMap.json'
const props = defineProps({
    width: {
        type: String,
        default: '100%'
    },
    height: {
        type: String,
        default: '400px'
    }
})
const data = reactive({
    option: {
        tooltip: {
            trigger: 'item',
            formatter: '{b}<br/>{c} (p / km2)'
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                dataView: { readOnly: false },
                restore: {},
                saveAsImage: {}
            }
        },
        visualMap: {//视觉映射
            min: 800,
            max: 5000,
            text: ['High', 'Low'],
            realtime: false,
            calculable: true,//是否拖拽
            inRange: {
                color: ['lightskyblue', 'yellow', 'orangered']
            }
        },
        series: [
            {
                type: 'map',
                map: 'china',
                data: [//地图数据
                    { name: '福建省', value: '3600' },
                    { name: '广东省', value: '1200' },
                    { name: '上海市', value: '2400' },
                    { name: '湖南省', value: '1900' },
                    { name: '湖南省', value: '1900' },
                    { name: '河南省', value: '1000' },
                    { name: '陕西省', value: '2600' },
                    { name: '四川省', value: '4600' },
                    { name: '吉林省', value: '3000' },
                    { name: '新疆维吾尔自治区', value: '5000' },
                ],
                label: {//标签
                    show: true,
                    fontSize: '8px',
                    color: '#000'
                },
                top: '5%',
                zoom: 1,//缩放
                itemStyle: {//地图区域的多边形 图形样式。
                    areaColor: '#219edb',
                    // borderColor: '#000',
                    // borderWidth: 0.5
                },
                emphasis: {//高亮状态下的多边形和标签样式。
                    label: {//标签
                        fontSize: '16px',
                        color: '#fff'
                    },
                    itemStyle: {//地图区域的多边形 图形样式。
                        areaColor: '#f00',
                        borderColor: '#ccdccd',
                        borderWidth: 2
                    },
                }
            }
        ]
    }
})
const main = ref(null)
onMounted(() => {
    initCharts()
})

function initCharts() {
    var myChart = echarts.init(main.value);
    //注册可用的地图
    echarts.registerMap('china', chinaMap)


    myChart.setOption(data.option);
    // 图表响应式
    // window.addEventListener('resize', () => {
    //     myChart.resize()
    // })
    window.onresize = () => {
        myChart.resize()
        //如果有多个表变动在下方依次写下去就可以了
    }

}
</script>
  
<style scoped>
.box {
    /* background-color: #eee; */
}
</style>
  